<template>
  <div class="page-login">
    <div class="login-container" id="login-container">
      <div class="form-container sign-up-container">
        <form action="javascript:void(0)">
          <h1>创建账户</h1>
          <div class="social-container">
            <a href="#">
              <Icon type="logo-facebook" />
            </a>
            <a href="#">
              <Icon type="logo-twitter" />
            </a>
            <a href="#">
              <Icon type="logo-github" />
            </a>
          </div>
          <!-- <span>或者使用邮箱注册</span> -->
          <input type="text" placeholder="用户名" required v-model="userName" />
          <input type="text" placeholder="昵称" required v-model="nickname" />
          <input type="email" placeholder="邮箱" required v-model="email" />
          <input
            type="password"
            placeholder="密码"
            required
            v-model="passWord"
          />
          <button @click="signup()">注册</button>
        </form>
      </div>
      <div class="form-container sign-in-container">
        <form action="javascript:void(0)">
          <h1>登录</h1>
          <div class="social-container">
            <a href="#">
              <Icon type="logo-facebook" />
            </a>
            <a href="#">
              <Icon type="logo-twitter" />
            </a>
            <a href="#">
              <Icon type="logo-github" />
            </a>
          </div>
          <input
            type="text"
            placeholder="账号"
            v-model="userName"
            required
            data-intro="
        <h4>✪&nbsp;普通用户账号:user &nbsp;&nbsp;&nbsp;&nbsp; 密码同</h4>
        <h4>✪&nbsp;匠人用户账号:admin &nbsp; 密码同</h4><br/>
        <p>账号仅供演示使用，请勿恶意修改网站数据</p>
        "
            data-step="2"
          />
          <input
            type="password"
            placeholder="密码"
            v-model="passWord"
            required
          />
          <a href="#">忘记密码？</a>
          <button @click="login()" size="large"
          data-intro="
        <h4>✪&nbsp;由于服务器配置较低，图片加载速度较慢，还请谅解</h4>
        <h4>✪&nbsp;最后祝您生活愉快❤️🐳😉</h4>
        "
            data-step="3">
            登录
          </button>
        </form>
      </div>
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>欢迎回来！</h1>
            <p>登录即可加入讨论，购得称心匠心美物</p>
            <button class="ghost" id="signIn" @click="handleSignIn">
              立即登录
            </button>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>你好，朋友！</h1>
            <p>加入我们，分享你的文艺生活</p>
            <button
              class="ghost"
              id="signUp"
              @click="handleSignUp"
              data-intro='<h2>点击此处注册账号</h2><br/> <hr /> 
              <h4>✪&nbsp;本平台设有<b style="color:red">普通用户</b>与<b style="color:red">匠人</b>两种角色</h4> 
              <h4>✪&nbsp;<b style="color:red">普通用户</b>可以购买商品、参与竞拍、发布手记、浏览帖子等</h4>
              <h4>✪&nbsp;<b style="color:red">匠人</b>在普通用户基础上额外拥有发布新商品、帖子与管理等权限</h4>'
              data-step="1"
            >
              立即注册
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'intro.js/minified/introjs.min.css';
// import "intro.js/themes/introjs-modern.css"; //主题样式

export default {
  name: 'login',
  data() {
    return {
      userName: '',
      passWord: '',
      email: '',
      nickname: '',
    };
  },
  methods: {
    login() {
      this.$Loading.start();
      this.axios
        .post('/api/login', {
          username: this.userName,
          password: this.passWord,
          nickname: this.nickname,
        })
        .then((data) => {
          if (data.data.status) {
            this.$Message.warning('您的账号正在禁封中...');
            this.$Loading.error();
          } else {
            this.$store.commit('setToken', data.data.api_token);
            this.$store.commit('setUser', data.data.nickname);
            this.$store.commit('setUid', data.data.id);
            this.$store.commit('setCid', data.data.craftsman_id);
            this.$store.commit('setAvatar', data.data.avatar);
            this.$store.commit('setVerified', data.data.verified);
            this.$Loading.finish();
            this.$Message.success('登录成功!');
            this.$router.push('/');
          }
        })
        .catch((err) => {
          console.log(err);
          this.$Loading.error();
        });
    },
    signup() {
      this.$Loading.start();
      this.axios
        .post('/api/regis', {
          username: this.userName,
          password: this.passWord,
          email: this.email,
        })
        .then((data) => {
          this.$store.commit('setToken', data.data.api_token);
          this.$store.commit('setUid', data.data.id);
          this.$store.commit('setUser', data.data.username);
          this.$Loading.finish();
          this.$Message.success('注册成功');
          this.$router.push('/');
        })
        .catch((err) => {
          console.log(err);
          this.$Loading.error();
        });
    },
    handleSignIn() {
      const container = document.getElementById('login-container');
      container.classList.remove('right-panel-active');
    },
    handleSignUp() {
      const container = document.getElementById('login-container');
      container.classList.add('right-panel-active');
    },
  },
  mounted() {
    const introJS = require('intro.js')();
    introJS
      .setOptions({
        overlayOpacity: 0.35, // popup透明度
        skipLabel: '跳过',
        nextLabel: '下一步',
        prevLabel: '上一步',
        doneLabel: '我明白了',
        hidePrev: true, // 若在第一步，會隱藏上一步按鈕
        hideNext: true, // 若在最後一步，會隱藏下一步按鈕
      })
      .start();
  },
};
</script>
